<template>
  <view>
    <view class="page">
      <map style="width: 100%; height: 360px;" :latitude="latitude" :longitude="longitude" :markers="covers"
        :circles="circles">
       <cover-view class="customCallout" slot="callout" marker-id="0">
         <!-- <cover-view>{{time}}分钟内有骑手接单</cover-view> -->
          <cover-view>
            附近有超过{{runners}}位骑手
          </cover-view>
        </cover-view>
      </map>
    </view>
    <!-- 订单详情信息列表 -->
    <!-- 1.代取送订单信息 -->
    <view class="order-detail-info" v-if="orderInfo.type==='代取送'">
      <view class="padding text-xl">
        订单提交成功，等待骑手接单
      </view>
      <!-- 地址信息区域 -->
      <view class="pick-send-address">
        <view class="address-now">
          <button class="cu-btn cuIcon bg-black">
            <text class="text-white">取</text>
          </button>
          <view class="address-text">
            <text class="text-df text-black text-cut" style="width: 250px;">{{pickAddress.name}}</text>
            <text class="text-sm text-red">{{pickAddress.userName+pickAddress.phone}}</text>
          </view>
        </view>
        <view class="address-new" style=" margin-top: 10px;">
          <button class="cu-btn cuIcon bg-red">
            <text class="text-white">收</text>
          </button>
          <view class="address-text">
            <text class="text-df text-black text-cut" style="width: 250px;">{{deliveryAddress.name}}</text>
            <text class="text-sm text-red">{{deliveryAddress.userName+deliveryAddress.phone}}</text>
          </view>
        </view>
      </view>
      <!-- 物品信息 -->
      <view class="cu-form-group border-top">
        <view class="title">物品信息</view>
      </view>
      <view class="order-detail border-top">
        <view class="order-detail-title text-df ">物品类型: <text class="text-gray"
            style="margin-left: 20px;">{{orderInfo.goodsInfo.goodsType}}</text> </view>
        <view class="order-detail-title text-df ">物品重量: <text class="text-gray"
            style="margin-left: 20px;">{{orderInfo.goodsInfo.goodsWeight}}kg</text></view>
        <view class="order-detail-title text-df ">跑腿距离: <text class="text-gray"
            style="margin-left: 20px;">{{orderInfo.distance}}</text>
        </view>
        <view class="order-detail-title text-df ">备注: <text class="text-gray"
            style="margin-left: 20px;">{{orderInfo.note}}</text>
        </view>
      </view>
      <!-- 图片显示区域 -->
      <view class="cu-form-group" v-if="imgList.length>0">
        <view class="grid col-4 grid-square flex-sub">
          <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="item">
            <image :src="item" mode="aspectFill" style="position: absolute;left:0"></image>
          </view>
        </view>
      </view>
      <!-- 订单信息 -->
      <view class="cu-form-group border-top">
        <view class="title">订单信息</view>
      </view>
      <view class="order-detail border-top">
        <view class="order-detail-title text-df ">订单编号:
          <text class="text-gray" style="margin: 0 5px 0 20px;">{{orderInfo._id}}</text>
          <view class="cu-tag line-blue" @click="copyText">复制</view>
        </view>
        <view class="order-detail-title text-df ">提交时间:
          <text class="text-gray" style="margin-left: 20px;">{{receiveTime.date+'-'+receiveTime.time}}</text>
        </view>
        <view class="order-detail-title text-df ">支付方式:
          <text class="text-gray" style="margin-left: 20px;">微信支付</text>
        </view>
        <view class="order-detail-title text-df ">实付金额:
          <text class="text-gray" style="margin-left: 20px;">￥{{orderInfo.price}}</text>
        </view>
        <view class="order-detail-title text-df ">付款时间:
          <text class="text-gray" style="margin-left: 20px;">{{orderInfo.payTime}}</text>
        </view>
      </view>
    </view>

    <!-- 2.代购订单信息 -->
    <view class="order-detail-info" v-if="orderInfo.type==='代购'">
      <view class="padding text-xl">
        订单提交成功，等待骑手接单
      </view>
      <!-- 收货地址信息信息 -->
      <view class="pick-send-address">
        <view class="address-now" v-if="JSON.stringify(shopAddress) != '{}'">
          <button class="cu-btn cuIcon bg-black">
            <text class="text-white">店</text>
          </button>
          <view class="address-text">
            <text class="text-df text-black text-cut" style="width: 250px;">{{shopAddress.name}}</text>
            <!-- <text class="text-sm text-red">{{shopAddress.userName+shopAddress.phone}}</text> -->
          </view>
        </view>
        <view class="address-new" style=" margin-top: 10px;">
          <button class="cu-btn cuIcon bg-red">
            <text class="text-white">收</text>
          </button>
          <view class="address-text">
            <text class="text-df text-black text-cut" style="width: 250px;">{{deliveryAddress.name}}</text>
            <text class="text-sm text-red">{{deliveryAddress.userName+deliveryAddress.phone}}</text>
          </view>
        </view>
      </view>
      <!-- 代购商品信息 -->
      <view class="cu-form-group">
        <view class="title">商品信息:</view>
      </view>
      <view class="text-content" style="padding:1rpx 30rpx;">{{orderInfo.goodsInfo.goodsDetail}}</view>
      <!-- 图片显示区域 -->
      <view class="cu-form-group" v-if="imgList.length>0">
        <view class="grid col-4 grid-square flex-sub">
          <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="item">
            <image :src="item" mode="aspectFill" style="position: absolute;left:0"></image>
          </view>
        </view>
      </view>
      <!-- 订单信息 -->
      <view class="cu-form-group border-top">
        <view class="title">订单信息</view>
      </view>
      <view class="order-detail border-top">
        <view class="order-detail-title text-df ">订单编号:
          <text class="text-gray" style="margin: 0 5px 0 20px;">{{orderInfo._id}}</text>
          <view class="cu-tag line-blue" @click="copyText">复制</view>
        </view>
        <view class="order-detail-title text-df ">提交时间:
          <text class="text-gray" style="margin-left: 20px;">{{receiveTime}}</text>
        </view>
        <view class="order-detail-title text-df ">支付方式:
          <text class="text-gray" style="margin-left: 20px;">微信支付</text>
        </view>
        <view class="order-detail-title text-df ">实付金额:
          <text class="text-gray" style="margin-left: 20px;">￥{{orderInfo.price}}</text>
        </view>
        <view class="order-detail-title text-df ">付款时间:
          <text class="text-gray" style="margin-left: 20px;">{{orderInfo.payTime}}</text>
        </view>
      </view>
    </view>

    <!-- 3.万能帮投稿信息 -->
    <view class="order-detail-info" v-if="orderInfo.type==='万能帮'" style="top: 10px;">
      <!-- 投稿信息 -->
      <view class="cu-form-group">
        <view class="title">投稿：</view>
        <view>{{orderInfo.helpInfo.content}}</view>
      </view>
      <!-- 图片显示区域 -->
      <view class="cu-form-group" v-if="imgList.length>0">
        <view class="grid col-4 grid-square flex-sub">
          <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="item">
            <image :src="item" mode="aspectFill" style="position: absolute;left:0"></image>
          </view>
        </view>
      </view>
 <!--     <comment-section></comment-section> -->
      <!-- 评论区 -->
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        //订单详情信息
        orderInfo: {},
        latitude: 39.908823,
        longitude: 116.39747,
        //图片信息
        imgList: [],
        // 显示圆配置
        circles: [],
        time: 2,
        runners: 20,
        // 打点
        covers: [{
            id: 0,
            latitude: 39.909,
            longitude: 116.39742,
            iconPath: '/static/location.png',
            width: 20,
            height: 20,
            customCallout: {
              anchorY: 0, // Y轴偏移量
              anchorX: 0, // X轴偏移量
              display: 'ALWAYS', // 'BYCLICK':点击显示; 'ALWAYS':常显
            },
          },
          {
            id: 1,
            latitude: 39.9,
            longitude: 116.39,
            iconPath: '/static/icon-3service/buy.png',
            width: 20,
            height: 20
          }
        ],
      } 
    },
    props: ['order'],
    mounted() {
      this.orderInfo = this.order;
      console.log(this.orderInfo);

      if (this.orderInfo.type === '万能帮') {
        this.imgList = this.orderInfo.helpInfo.imgList;
      } else {
        this.latitude = this.orderInfo.deliveryAddress.latitude;
        this.longitude = this.orderInfo.deliveryAddress.longitude;

        let cObj = {};
        //设置地图圆圈
        cObj.latitude = this.latitude;
        cObj.longitude = this.longitude;
        cObj.radius = 300;
        cObj.fillColor = "#66ccff6A";
        cObj.color = "#12A1DD";
        cObj.strokeWidth = 1;
        this.circles.push(cObj);
        //
        this.covers[0].latitude = this.latitude;
        this.covers[0].longitude = this.longitude;
        //
        if (this.orderInfo.type === '代取送') {
          this.covers[1].latitude = this.pickAddress.latitude || null;
          this.covers[1].longitude = this.pickAddress.longitude || null;
        } else {
          this.covers[1].latitude = this.orderInfo.shopAddress.latitude || null;
          this.covers[1].longitude = this.orderInfo.shopAddress.longitude || null;
        }
        this.imgList = this.orderInfo.goodsInfo.imgList;
      }
    },
    methods: {
      ViewImage(e) {
        uni.previewImage({
          urls: this.imgList,
          current: e.currentTarget.dataset.url
        });
      },
      //复制订单文本编号
      copyText() {
        uni.setClipboardData({
          data: this.orderInfo._id,
          success: () => {
            uni.showToast({
              title: '复制成功',
              icon: 'success'
            });
          },
          fail: () => {
            uni.showToast({
              title: '复制失败',
              icon: 'none'
            });
          }
        });

      }
    },
    computed: {
      //订单起始地址信息
      pickAddress() {
        return this.orderInfo.pickAddress
      },
      //订单收货地址信息
      deliveryAddress() {
        return this.orderInfo.deliveryAddress
      },
      //指定店铺地址信息
      shopAddress() {
        return this.orderInfo.shopAddress
      },
      //要求送达时间
      receiveTime() {
        return this.orderInfo.receiveTime
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    .btn-box {
      margin: 10px;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;

      .btn {
        flex: 1;
        margin: 0 5px;
      }

      &.first {
        margin: 10px 10px 0 10px;
      }
    }
  }

  .order-title {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .border-top {
    border-top: 1px solid #eee;
  }

  .order-detail {
    background-color: #ffffff;
    padding: 1rpx 30rpx;
    display: flex;
    min-height: 100rpx;
    justify-content: space-between;
    flex-direction: column;
    border-bottom: 1px solid #eee;

    .order-detail-title {
      margin: 10px 0;
    }
  }

  .customCallout {
    width: 140px;
    padding: 10px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0px 4rpx 16px 0px rgba(189, 191, 193, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }
</style>